<template>
  <div class="container">
    <div class="title">
      <div>
        <img :src="currentStudent.imgUrl" class="stu-img" />
      </div>
      <div>{{ currentStudent.name }}</div>
      <div>{{ currentStudent.grade }}</div>
    </div>
    <div id="chart2" class="chart-1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getText } from "./../common.js";
export default {
  name: "studentScore",
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
    currentStudent: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  data() {
    return {
      timer: null,
      number: null,
      arr: [],
      xAxiosNames: [],
      selectItem: "",
      num: 0,
      chartData: [],
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: true,
    },
    selectItem: {
      handler(val) {
        if (val) {
          const item = this.chartData.find((el) => el.period === val);
          this.arr = item.subjectName.map((el, key) => {
            return { subjectName: el, score: item.score[key] };
          });
          this.selectItem = item.period;
        }
      },
      deep: true,
    },
    currentStudent: {
      handler(val) { 
        val && this.getData();
      },
      deep: true,
    },
  },
  mounted() {
    // setTimeout(() => {
    //   this.getEchart();
    // }, 5000);
    this.getData()
  },
  methods: {
    getText,
    getData() {
      const list = this.allData.filter((el) => el.scoreType === "1" && el.stuName === this.currentStudent.name);
      this.chartData = list;
      if (list.length > 0) {
        this.xAxiosNames = list.map((el) => el.period);
        // this.selectItem = list[0].period;
      } else {
        this.arr = [];
      }
      this.initData();
    },
    initData() {
      this.number = this.number == this.arr.length ? 0 : this.number;
      this.timer = setTimeout(() => {
        this.number++;
        this.initData();
      }, 2000);
      this.getEchart();
    },
    getEchart() {
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById("chart2")); // 图标初始化
      let dataScore = this.chartData.map((el) => {
        const sObj = {
          score0: 0,
          score1: 0,
          score2: 0,
          score: 0,
        };
        const tempScore = el.score.split(";");
        tempScore.forEach((s, i) => {
          s.split(",").forEach((k) => {
            sObj[`score${i}`] += Number(k);
          });
        });
        const { score0, score1, score2 } = sObj;
        sObj.score = ((score0 + score1 + score2) / 1.5).toFixed(1);
        return sObj;
      });
      const option = {
        grid: {
          top: "15%",
        },
        legend: {
          data: [
            "总分[百分制]",
            "知识与技能基础",
            "认知与实践能力",
            "学习特点",
          ],
          show: true,
          itemHeight: 15, // 设置高度
          itemGap: 20, // 设置间距
          textStyle: {
            color: "#B4CEFF",
            fontSize: "16",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.xAxiosNames, // 任务名
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: "{value}",
            color: "#fff",
          },
        },
        series: [
          {
            name: "总分[百分制]",
            type: "line",
            yAxisIndex: 0,
            data: dataScore.map((el) => el.score),
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              formatter: function (p) {
                const value = p.value + "\n";
                return value + "(" + getText(value) + ")";
              },
              textStyle: {
                color: "#fff",
                fontSize: 16, //字体大小
              },
            },
          },
          {
            name: "知识与技能基础",
            type: "line",
            yAxisIndex: 0,
            data: dataScore.map((el) => el.score1),
            label: {
              show: true, //开启显示
              position: "bottom", // 
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 16, //字体大小
              },
            },
          },
          {
            name: "认知与实践能力",
            type: "line",
            yAxisIndex: 0,
            data: dataScore.map((el) => el.score2),
            label: {
              show: true, //开启显示
              position: "left", // 
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 16, //字体大小
              },
            },
          },
          {
            name: "学习特点",
            type: "line",
            yAxisIndex: 0,
            data: dataScore.map((el) => el.score2),
            label: {
              show: true, //开启显示
              position: "right", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 16, //字体大小
              },
            }
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: url(~@/assets/img/bj.jpg) no-repeat;
  width: 100%;
  height: 500px;
  position: relative;
}

.chart-1 {
  width: 90%;
  height: 500px;
}
 
.select {
  position: absolute;
  right: 0;
}

.title {
  position: absolute;
    right: 45px;
    top: 50px;
    font-size: 20px;
  color: #fff;
}

.stu-img {
  width: 100px;
  height: 100px;
}
</style>
